import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByButton from "@/components/ui/ByButton";
import FormInput from "@/components/common/FormInput";
import PopupContainer from "@/components/app/PopupContainer";
import FormInputNumber from "@/components/common/FormInputNumber";

import useForm from "@/hooks/useForm";
import ApiBudget from "@/api/budget";

export default ({
  billDetailId,
  checkType = 1,
  onCancel,
  onSuccess,
}: {
  billDetailId: number;
  checkType?: number;
  onCancel: () => void;
  onSuccess: () => void;
}) => {
  const { loading, model, setModel, submit } = useForm(
    ApiBudget.materialConfirmUpload,
    {
      defaultModel: {
        checkType,
        billDetailId,
        workerCheckedRemark: "",
        workerCheckedNum: 0 as "" | number,
      },
      rules: {
        workerCheckedNum: { required: checkType === 2, message: "请输入数量" },
        workerCheckedRemark: { required: true, message: "请输入备注" },
      },
      onSuccess() {
        Taro.showToast({ title: "操作成功！" });
        onSuccess();
      },
    }
  );

  return (
    <PopupContainer
      title={checkType === 1 ? "全部确认" : "部分确认"}
      onCancel={onCancel}
    >
      <View className="p-3">
        {checkType === 2 && (
          <ByCell label="数量" vertical>
            <FormInputNumber
              min={0}
              precision={2}
              placeholder="输入数量"
              onChange={(e) => setModel({ workerCheckedNum: e })}
            />
          </ByCell>
        )}

        <ByCell label="备注" vertical>
          <FormInput
            type="textarea"
            placeholder="输入备注"
            value={model.workerCheckedRemark}
            onChange={(e) => setModel({ workerCheckedRemark: e })}
          />
        </ByCell>
      </View>

      <ByButton
        size="large"
        loading={loading}
        className="w-2/3 my-3"
        onClick={() => submit()}
      >
        提交
      </ByButton>
    </PopupContainer>
  );
};
